<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Upload demo</title>

  <!-- Bootstrap -->
  <link href="/static/bootstrap-3.3.4/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <div class="main-title">
    <h2>Web Uploader demo</h2>
  </div>
  <div class="container">
    <span class="" id="picker">选择文件</span><Br/><br/>
    <span class="btn btn-info" id="ctlBtn">上传</span><Br/><br/>
    <div class="list">
    </div>
    <img src="" title""  alt="" id="img"/>
  </div>
  <!-- jQuery -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  <link href="/static/webuploader-0.1.5/webuploader.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="/static/webuploader-0.1.5/webuploader.js"></script>

  <script type="text/javascript">
    var uploader = WebUploader.create({
        // auto: true,
        // swf文件路径
        swf: '/static/webuploader-0.1.5/Uploader.swf',

        // 文件接收服务端。
        server: '/index.php/admin/Upload/index',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',

        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });

    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
      var $list = $(".list");
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
        '</div>' );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );
    });
    
    uploader.on( 'uploadSuccess', function( file, response ) {
        $( '#'+file.id ).find('p.state').text('已上传');
        if(response.code){
          $("#img").attr('src', response.successFile);
        }
    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
    });

    $("#ctlBtn").bind('click', function(){
      uploader.upload();
    })
  </script>

</body>
</html>